<template>
  <div class="nav-box">
    <div class="logo">
      <div class="img">
        <img src="@/assets/images/logo.png" alt="">
      </div>
    </div>
    <el-menu
        class="el-menu-vertical el-menu"
        background-color="rgb(0, 72, 124)"
        text-color="white"
        active-text-color="rgb(236, 195, 75)"
        mode="vertical"
        unique-opened
        router
        :default-active="active"
        :unique-opened="true"
    >
      <el-menu-item index="/bench">
        <el-icon><HomeFilled /></el-icon>
        <template #title>工作台</template>
      </el-menu-item>
      <el-menu-item index="/fileList">
        <el-icon><Folder /></el-icon>
        <template #title>文档管理</template>
      </el-menu-item>
      <el-badge class="item" is-dot :hidden="hasLeaveUnread">
        <el-sub-menu index="1">
          <template #title>
            <el-icon><Checked /></el-icon>
            <span>办公审批</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/mine-all">我的申请</el-menu-item>
            <el-badge class="item" is-dot :hidden="hasLeaveUnread">
              <el-menu-item index="/app-handle">我的处理</el-menu-item>
            </el-badge>
            <el-menu-item index="/app-copy">我的抄送</el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>
      </el-badge>
      <el-badge class="item" is-dot :hidden="hasBorrowUnread">
        <el-sub-menu index="8">
          <template #title>
            <el-icon><Checked /></el-icon>
            <span>借款申请</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/borrow-mine">我的申请</el-menu-item>
            <el-badge class="item" is-dot :hidden="hasBorrowUnread">
              <el-menu-item index="/borrow-handle">我的处理</el-menu-item>
            </el-badge>
            <el-menu-item index="/borrow-copies">我的抄送</el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>
      </el-badge>
      <!--<el-menu-item index="/pro">-->
      <!--  <el-icon><FolderOpened /></el-icon>-->
      <!--  <template #title>项目管理</template>-->
      <!--</el-menu-item>-->
      <el-badge class="item" is-dot :hidden="hasMessageUnread">
        <el-menu-item index="/msg">
          <el-icon><ChatDotSquare /></el-icon>
          <template #title>消息中心</template>
        </el-menu-item>
      </el-badge>
      <el-menu-item index="/study">
        <el-icon><DataBoard /></el-icon>
        <template #title>学习园地</template>
      </el-menu-item>
      <el-menu-item index="/user">
        <el-icon><UserFilled /></el-icon>
        <template #title>用户中心</template>
      </el-menu-item>
      <el-sub-menu index="3" v-if="obj.root === 0 || obj.root === 1 || obj.role === 6">
        <template #title>
          <el-icon><Menu /></el-icon>
          <span>管理员功能</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/flow">用户管理</el-menu-item>
          <el-menu-item index="admin"  v-show="userRoot === 0">合同管理</el-menu-item>
        </el-menu-item-group>
      </el-sub-menu>
      <el-menu-item index="/rule">
        <el-icon><DataBoard /></el-icon>
        <template #title>规章信息</template>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script setup>
import {ElMenu, ElMenuItem, ElIcon, ElMenuItemGroup, ElSubMenu, ElBadge} from 'element-plus'
import {Menu, UserFilled, Coin, HomeFilled, DataBoard, Folder, Checked,FolderOpened,ChatDotSquare} from '@element-plus/icons-vue'
import {onMounted, reactive, ref} from "vue"
import emitter from "@/lib/eventBus.js"
import {getMSGList, getUnreadMsg, upTopCurrentMessage} from "@/api"
import {getTodo} from "@/api/OA/Seal"
import {getLeaveTodo} from "@/api/OA/Leave"
import {getFinanceTodo} from "@/api/OA/Finance"
import {getCount, getNewInform, getUnread, getUnreadMessage} from "@/api/OA/Approve"
import {senMessage} from "@/lib/utils"
import {getBUnread, getTotalCount} from "@/api/Borrow/Borrow"
import {onBeforeUnmount} from "vue-demi"


const hasUnread = ref(true)
const hasLeaveUnread = ref(true)
const bangongUnread = ref(true)
const hasFinanceUnread = ref(true)
const hasMessageUnread = ref(true)
const hasBorrowUnread = ref(true)

const isCollapse = ref(true)
//根据权限判断是否显示用户审批
let isManShow = ref(false)
const isRoleManage = ref(false)
//用户信息
let userInfo = ref([])

let obj = reactive({})
// 用户权限
let userRoot
//默认路由
const active = ref('/bench')

emitter.on('home_menu',(index)=>{
  active.value = index
})

let timer
let user
onMounted(()=>{
  obj = JSON.parse(localStorage.getItem('syhyDocManSys'))
  user = obj
  userInfo.value.push(obj)
  userRoot = obj.root
  active.value = 'bench'
  if(obj.root === 0 || obj.role ===6){
    //仅超级管理员显示用户管理
    isManShow.value = true
  } else {obj.role === 6}{
    isManShow.value = true
  }
  if (obj.root === 0 && obj.root === 1){
    isRoleManage.value = true
  } else {
    isRoleManage.value = false
  }
  emitter.on('refresh_dot',()=>{
    getNavigationBadge()
  })
  getNavigationBadge()
  timer = setInterval(()=>{
    getBorCount()
    getAppCount()
  },2000)
})

onBeforeUnmount(()=>{
  clearInterval(timer)
})

const getSealUnread = async (id) => {
  try {
    const {data:res} = await getNewInform(user.id)
    hasUnread.value = res.data === 1
  } catch (e) {
    console.log(e)
  }
}

const getLeaveUnread = async (id) => {
  try {
    const {data:res} = await getNewInform(user.id)
    hasLeaveUnread.value = res.data
  } catch (e) {
    console.log(e)
  }
}

const getFinanceUnread = async (id) => {
  try {
    const {data:res} = await getFinanceTodo(id ? id :userInfo.value[0].id)
    hasFinanceUnread.value = res.data
  } catch (e) {
    console.log(e)
  }
}

const getMessageUnread = async (id) => {
  try {
    const {data:res} = await getUnreadMessage(user.id)
    if (res.code === 200){
      hasMessageUnread.value = !res.data;
      senMessage('您有未读消息待查看')
    }
  } catch (e) {
    console.log(e)
  }
}

const getBorrowUnread = async (id) => {
  try {
    const {data:res} = await getBUnread(user.id)
    if (res.code === 200){
      hasBorrowUnread.value = !res.data;
      senMessage('您有未读消息待查看')
    }
  } catch (e) {
    console.log(e)
  }
}

const toggleSidebar = ()=>{
  isCollapse.value = !isCollapse.value
  console.log(isCollapse.value)
}

const getNavigationBadge = (id) => {
  // getSealUnread(id)
  // getFinanceUnread(id)
  getMessageUnread(id)
  getLeaveUnread(id)
  getBorrowUnread()
}

const getAppCount = async () =>{
  try {
    const {data:res} = await getCount(user.id)
    let aCount = localStorage.getItem('aCount')
    if (aCount){
      if (aCount < res.data){
        localStorage.setItem('aCount',res.data)
        senMessage('您有新的申请待查看')
      }
    } else {
      localStorage.setItem('aCount',res.data)
    }
  } catch (e) {
    console.log(e)
  }
}

const getBorCount = async () => {
  try {
    const {data:res} = await getTotalCount(user.id)
    let aCount = localStorage.getItem('aCount')
    if (aCount){
      if (aCount < res.data){
        localStorage.setItem('aCount',res.data)
        senMessage('您有新的借款申请待查看')
      }
    } else {
      localStorage.setItem('aCount',res.data)
    }
  } catch (e) {
    console.log(e)
  }
}

emitter.on('reloadBadge',(id)=>{
  // getSealUnread(id)
  // getFinanceUnread(id)
  getMessageUnread(id)
  getLeaveUnread()
})

</script>

<style  scoped>
.nav-box {
  width: 8%;
  height: 100%;
  position: fixed;
  top: 0%;
  bottom: 0;
  left: 0;
  transition: width 0.28s;
  z-index: 1001;
  overflow: hidden;
  background-color:  rgb(2, 49, 112);
  .el-menu {
    height: 100%;
    width: 100% !important;
    overflow-y: auto;
    border: none;
    :deep(el-menu-item-group__title){
      display: none;
    }
  }
  .logo{
    height: 10vh;
    background: linear-gradient(to bottom, rgb(175 238 238), rgb(0, 71, 123));
    display: flex;
    .img{
      margin: 1vh auto;
      img{
        height: 7vh;
      }
    }
  }
}
:deep(el-menu-item-group__title){
  display: none !important;
}

:deep(.el-badge__content.is-fixed) {
  transform: none !important;
}

:deep(.el-badge){
  display: unset !important;
}
</style>
